<template>
	<div class="main">
		<van-field label="上级单位" v-model="data.ParentCompanyName" name="title" readonly>
		</van-field>
		<van-field label="上报类型" v-model="data.ReasonType"  readonly>
		</van-field>
				<van-field label="企业名称" v-model="data.EnterpriseName"  readonly>
		</van-field>
				<van-field label="上报时间" v-model="data.CreateDate"  readonly>
		</van-field>

		<van-field
			label="上报原因"
			rows="3"
			autosize
			type="textarea"
			v-model="data.Remarks"
      readonly
		>
		</van-field>

		<div class="fjcolor">
			<div class="borderbot">
				<div class="upload-hd">
					<span class="imglist">隐患附件</span>
						<div class="imgs mr-10" v-for="(item, index) in fileList" :key="index">
							<img class="upload-img" :src="baseUrl + item" />
							
						</div>
					
				</div>
			</div>
		</div>	

	</div>
</template>

<script>
import { formatDate, getDate } from '@/utils/getDate'
import { mapGetters } from 'vuex'
import store from '@/store/index'
import {getDangerDetail } from '@/api/CompanyEscalation'
export default {
	
	data() {
		return {
			id: this.$route.query.id,
			data: {
				
			},
			menuList: [],
			mobile: '',
			message: '',
			radio: '1',
			checkbox: false,
			checkboxGroup: [],
			value: '',
			showCalendar: false,
			activeNames: ['1'],
		    fileList: [],
			showPopup: false,
			MannerItemPopup: false,
			userId: [],
			show: false,
			Component: '',
			CASNo: '',
		}
	},
	beforeMount () {
		this.data = []
		let title = '查看重点企业上报详情'
		if (this.id != 0) {
			this.getDangerDetail()
		} 
		store.commit('updateTitle', title)
	},
	created() {
		

	},
	computed: {
		...mapGetters(['baseUrl', 'CompanyCode', 'roles']),
	},
	activated() {},
	methods: {
		getDangerDetail(){
			const param = {
				id: this.id,
			}
			getDangerDetail(param).then((res) => {
				console.log(res.data, 'res.data')
				this.data = res.data
				var PramListChs = res.data.PramListChs
				for(var i = 0; i < PramListChs.length;i++){
				   if(res.data.ReasonType == PramListChs[i].ID){
					res.data.ReasonType = PramListChs[i].Name
				   }
				}
				if (res.data.Attachs != null && res.data.Attachs != "") {
					this.fileList = res.data.Attachs.split(";");
				}
			})
		},
	},
}
</script>

<style lang="less" scoped>
.col-detail {
	color: #333;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.col-del {
		display: flex;
		align-items: center;
		img {
			width: 15px;
			height: 15px;
			margin-right: 5px;
		}
	}
}
.valueclass {
	color: rgb(0, 195, 224);
}
.dialog-content-text {
	height: auto;
}
.fjcolor {
	background-color: #fff;
}
.borderbot{
	border-bottom: 0.02667rem solid #ebedf0;
	margin: 0 15px;
}
.upload-hd {
	display: flex;
	padding-top: 10px;
	padding-bottom: 10px;
	.upload-img,
	.imgs {
		position: relative;
		width: 60px;
		height: 60px;
	}
	.delImg {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
.imglist {
	font-size: 0.37333rem;
	color: #646566;
	margin-right: 1.7rem;
}
</style>
